Using state transitions

Set state transitions to define how the state manager reacts when the application state changes, such as when the user clicks a button. For example, you can:

• Define the duration and start time of a transition
• Define whether the user can interrupt the transition
• Use a custom animation.

Setting transitions between any to any state

When you create states the state manager uses the default transition to transition between states.

To set the transitions between states:

1. Create a toggle button and a state manager that has one state group with two states (for example, On and Off). See Create a toggle button.
2. In the State Tools click Transition Editor to open the State Transition Editor.
   To create a new transition, click + Create Transition under the existing transitions.
   
3. When you first open the State Transition Editor it shows the transition that is used between all states in that state group. Move your mouse pointer over to see the details of the transition.
   
4. In the window that pops up set:
   • Duration to the length of the transition in milliseconds. Either click and drag in the Duration area or enter the new value to set the duration of the transition.
   • Allow interrupt or Always full time set how Kanzi handles interruption of the transition:
     • Always full time uses the entire time set in the Duration to transition to the state after the interruption occurs.
     • Allow interrupt uses only the remaining time set in the Duration to transition to the state after the interruption occurs.
   • Configure Animations enables you to further define the details of the transition. In the State Transition Editor window set:
     • Start Time to the time in milliseconds that elapses before the transition starts.
     • Direction to whether the transition applies to the transition from the Start State to the End State, or to the transitions from both states:
       • Unidirectional applies the transition only to the transition from the Start State to the End State.
       • Bidirectional applies the transition to the transition from the Start State to the End State, and from the End State to the Start State.
     • Easing Function sets the easing function that defines the curve of the transition.
       Use an easing function to make UI elements more lifelike. Because objects in real life never start or stop immediately, the right easing function can help you create a more pleasant user experience.
       Select the most suitable easing function.
       

       Hover over the image of the easing function to see the type of the animation it creates.

       Easing function	Easing mode
       	Ease in	Ease out	Ease in out
       Back
       Bounce
       Circle
       Cubic
       Elastic
       Exponential
       Linear
       Power
       Quadratic
       Quartic
       Quintic
       Sine
       Smoother step
       Smooth step
       Step

     • Easing Mode defines how the easing function is applied to the transition:
       • Ease in applies to the transition the easing function as it is.
       • Ease out applies to the transition the negative value of the easing function.
       • Ease in-out applies to the first half of the transition the easing function as it is, and to the second half of the transition the negative value of the easing function.
     • Transition Animations enables you to use a custom animation for the transition.
       To add a transition animation, at the bottom of the State Transition Editor click .

     
     

Setting transitions between specific states

You can set custom transitions between specific states. You can add states to the State Transition Editor canvas and configure transition settings between them.

To set transitions between specific states:

1. Right-click in the State Transition Editor and in the Add State To Canvas select the state for which you want to set the transitions.
   To show all states, click Add All States To Canvas.
   
2. Click the state to select it and click the Default transitions to set a Custom transition.
   
3. Move your mouse pointer over the transitions to see the details of the transitions.
   The State Tools shows you the transitions you define in the State Transition Editor. Click a transition to open the custom settings for that transition in the State Transition Editor.
   

Configuring easing functions

You can configure some of the easing functions in the State Transition Editor to define the values in the function that sets the transition curve.

The easing functions you can configure in the State Transition Editor are:

• Back
  • Use the Amplitude property to sets the amplitude or depth of the transition curve.
  
• Elastic
  • Use the Oscillations property to set the amount of oscillations in the transition curve.
    
  • Use the Springiness property to set the elasticity of the oscillations in the transition curve.
  
• Exponential
  • Use the Exponent property to set the exponent to the power of which the transition curve multiplies.
  
• Power
  • Use the Power property to set the speed by which the transition curve accelerates.
  

See also

State manager

Creating state managers

Using the Button nodes

Open topic with navigation